<template>
    <div class="author dtrebg" v-if="detail.artist">
        <h5>创作者</h5>
        <div class="con">
            <div class="avatar">
                <Image :url="detail.artist.headUrl"/>
            </div>
            <div class="nickname">
                <p>{{detail.artist.nick}}</p>
                <div class="rz">
                    <img src="/images/rz2.png"/><span>认证艺术家</span>
                </div>
            </div>
            <div class="owner">
                <b>{{detail.artist.worksCount}}</b>
                <p>创作作品</p>
            </div>
        </div>
        <div class="introduce">
            {{detail.artist.introduce}}
        </div>
    </div>
</template>

<script>
import { reactive,toRefs,getCurrentInstance,computed } from 'vue'
import {useRoute,useRouter} from 'vue-router'
import { useStore } from 'vuex'
import Image from '@/components/image.vue'

export default {
    components:{
       Image
    },
    props:{

    },
    setup(props,context){
        const router = useRouter()
        const route = useRoute()
        const store = useStore()
        const {proxy} = getCurrentInstance()

        const state = reactive({
            detail:computed(()=>store.state.arApi.detail)
        })

        return{
            ...toRefs(state)
        }
    }
}
</script>

<style lang="scss" scoped>
    .author{
        padding: 0 40px 30px 40px;
        h5{
            font-size: 36px;
            font-weight: bold;
            color:var(--baseColor);
            line-height: 40px;
            border-top: 2px solid rgba(217, 217, 217, 0.3);
            padding: 30px 0 0 0;
        }
        .con{
            display: flex;  
            height: 150px;
            margin: 30px 0 0 0;
            .avatar{
                height: 150px;
                width: 150px;
                border-radius: 50%;
                overflow: hidden;
            }
        }
        .nickname{
            display: flex;
            flex: 1;
            flex-flow: column;
            align-items:flex-start;
            justify-content: center;
            padding: 0 0 0 30px;
            p{
                font-size: 32px;
                font-weight: bold;
                color: var(--baseColor);
            }
            .rz{
                width: 170px;
                height: 44px;
                line-height: 44px;
                background: url('/images/rz.png') left top no-repeat;
                background-size: 100% 100%;
                margin: 14px 0 0 0;
                img{
                    float: left;
                    width: 24px;
                    margin: 10px 0 0 14px;
                }
                span{
                    display: block;
                    font-size: 24px;
                    color: #fff;
                    transform:scale(0.9);
                    -webkit-transform:scale(0.9);  /*兼容-webkit-引擎浏览器*/
                    -moz-transform:scale(0.9);
                }
            }
        }
        .owner{
            display: flex;
            flex-flow: column;
            align-items:center;
            justify-content: center;
            width: 130px;
            height: 130px;
            border: 1px solid var(--baseColor);
            border-radius:20px ;
            p{
                font-size: 24px;
                color: var(--baseColor);
                padding: 3px 0 0 0;
            }
            b{
                font-size: 48px;
                line-height: normal;
            }
        }
        .introduce{
            font-size: 28px;
            font-weight: 400;
            line-height: 46px;
            padding: 40px 0 0 0;
        }
    }
</style>